/**
 * @author:linjiye
 * @date: 2024/12/28
 * @desc:
 **/

import {StyleSheet, Text, View} from 'react-native'
import React, {useState} from 'react'
import Slider from "@react-native-community/slider";
import {LinearGradient} from "expo-linear-gradient";

type Props = {}


interface FcSliderProps {
    value?: number
}

// @ts-ignore
const FcSlider = ({
                      value = 0,
                      colors = ['rgba(51,77,176,1)', 'rgba(198,94,253,1)'],
                      min = 0,
                      max = 100,
                      step = 1,
                      showMinMax,
                      trackTintColor = '#F1F2F4',
                      thumbTintColor = 'white',
                      thumbImage = require('@/assets/images/public/slider_icon.png'),
                      onFcSlider,
                      disabled = false,
                      children,
                        style
                  }: Props) => {
    const handleClick = (val) => {
        if(step ! = 1){
            onFcSlider(val.toFixed(1) * 1)
        }else{
            onFcSlider(val.toFixed(0) * 1)
        }
        
    }

    return (
        <View style={[styles.container,style]}>
            <LinearGradient
                colors={colors} // 渐变色
                start={{x: 0, y: 0}}
                end={{x: 1, y: 1}}
                style={styles.gradient}
            >
                <Slider
                    style={styles.slider}
                    tintStyle={styles.track}
                    thumbStyle={styles.thumb}
                    minimumValue={min}
                    maximumValue={max}
                    minimumTrackTintColor="transparent" // 使最小轨道透明
                    maximumTrackTintColor={trackTintColor} // 使最大轨道透明
                    thumbTintColor={thumbTintColor}// 滑块颜色
                    thumbImage={thumbImage}
                    value={value}
                    step={step}
                    disabled={disabled}
                    onValueChange={handleClick}
                />
            </LinearGradient>
            {showMinMax &&
                <View style={styles.num_sign}>
                    <Text style={styles.sign}>{min}</Text>
                    <Text style={styles.sign}>{max}</Text>
                </View>
            }
            <>{children}</>
        </View>

    )
}

export default FcSlider

const styles = StyleSheet.create({
    container: {},
    gradient: {
        width: '100%',
        height: 4,
        justifyContent: 'center',
        borderRadius: 20,
        padding: 0
    },
    slider: {
        width: '100%',
        height: 26,
    },
    track: {
        height: 4
    },
    thumb: {
        width: 22,
        height: 22
    },
    num_sign: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingTop: 10
    },
    sign: {
        color: 'rgba(0, 0, 0, 0.5)',
        fontSize: 14
    }
})